<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="../css/swiper-bundle.css">
</head>

<body>
    <header>
        <div class="bancen">
            <div class="title-left">
                <div>
                    <a href="">网站导航</a>
                </div>
                <div>
                    <a href="">商家服务</a>
                </div>
                <div>
                    <a href="">客户服务</a>
                </div>
            </div>
            <div class="title-right">
                <div>
                    <a href="./login.html" class="login-hover">请登录</a>
                </div>
                <div>
                    <a href="">我的订单</a>
                </div>
                <div>
                    <a href="./cart.html">购物车</a>
                </div>
            </div>
        </div>
    </header>

    <!-- 主页头部 -->
    <div class="index-header">
        <div class="bancen">
            <div class="index-header-img">
                <a href="">
                    <img src="../img/logo1.png" alt="">
                </a>
            </div>
            <!-- 头部搜索框 -->
            <div class="index-header-search">
                <div class="search-content">
                    <i class="iconfont icon-fangdajing"></i>
                    <form action="">
                        <div>
                            <input type="text">
                        </div>
                        <input type="text" class="search-content-ipt" value="搜索">
                    </form>
                    <ul>
                        <li>秋装上新</li>
                        <li>爆款8折起</li>
                        <li>家装</li>
                        <li>满额赠蟹卡</li>
                        <li>零食低至9.9</li>
                        <li>取暖器</li>
                        <li>手机</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 导航头部分 -->
    <div class="index-nav-header bancen">
        <div class="nav-left">
            <i style="background-position: -928px 0"></i>
            分类
        </div>
        <!-- 中间商标 -->
        <div class="ng-nav-index">
            <ul class="ng-nav">
                <li class="title-pic">
                    <a href="">
                        <img src="https://image2.suning.cn/uimg/cms/img/161185054090483911.png" alt="">
                    </a>
                    <span></span>
                </li>
                <li class="title-pic">
                    <a href="">
                        <img src="https://image4.suning.cn/uimg/cms/img/161185055134555442.png" alt="">
                    </a>
                    <span></span>
                </li>
                <li class="title-pic">
                    <a href="">
                        <img src="https://image5.suning.cn/uimg/cms/img/161185056732073882.png" alt="">
                    </a>
                    <span></span>
                </li>
                <li>
                    <a href="./list.html?cat_one_id=食品酒水" title="">食品酒水</a>
                    <span></span>
                </li>
                <li>
                    <a href="./list.html?cat_one_id=童装玩具">童装玩具</a>
                    <span></span>
                </li>
                <li>
                    <a href="./list.html?cat_one_id=家装建材">家装建材</a>
                    <span></span>
                </li>
                <li>
                    <a href="./list.html?cat_one_id=奶粉尿裤">奶粉尿裤</a>
                    <span></span>
                </li>
                <li>
                    <a href="./list.html?cat_one_id=其他">其他产品</a>
                    <span></span>
                </li>
            </ul>
        </div>
        <!-- 右边公示 -->
        <div class="ng-nav-right-wenjuan">
            <a href="">
                <img src="https://image1.suning.cn/uimg/cms/img/159525719075727245.png" alt=""
                    style="width: 196px; height: 39px;">
            </a>
        </div>
    </div>
    <!-- 分类列表 -->
    <div class="fenlei-list bancen">
        <div class="lef">
            <img src="../img/liebiao.png" alt="">
        </div>
        <!-- banner区域 -->
        <div class="first">
            <div class="banner-wrapper">

                <!-- banner插件内容 -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="https://image3.suning.cn/uimg/cms/img/163462406228917453.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="	https://image3.suning.cn/uimg/cms/img/163472053683021457.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="../img/banner3.png" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="../img/banner4.png" alt="">
                        </div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                    <!-- <!-- </div> -->
                </div>

            </div>
        </div>
        <div class="first-right">
            <div class="top-box">
                <div class="user-img"></div>
                <div class="not-login">
                    <div class="btn-group">
                        <p class="hi">Hi，欢迎来到苏宁易购</p>
                        <a href="./login.html">登录</a>
                        <a href="reg.html">注册</a>
                    </div>
                </div>
            </div>
        </div>


    </div>





    <!-- script部分 -->
    <script src="../js/swiper-bundle.min.js"></script>
    <script src="../js/index.js"></script>
    <script src="../tools/jquery.min.js"></script>
    <script src="../js/cookie.js"></script>

    <script>
        // 退出登录点击事件
        $('[name="logout"]').click(function () {
            // 获取 cookie 对象
            const cookieObj = myGetCookie();
            console.log(cookieObj);
            // 在对象中调用 login 这个键名 
            // 如果 结果是 undefined 证明 没有这个键名 
            if (cookieObj.login === undefined) {
                // 证明没有 login 这个键名 证明没有登录
                if (window.confirm('您还没有登录,点击确定,跳转登录页面')) {
                    window.location.href = './login.html';
                }

            } else {
                // 已经有登录数据了 删除 login
                // 也就是重新设定 login 时效设定为负数
                // 删除操作时 键值 无所谓
                // 键名 不是 原始cookie 的键名
                // 路径 必须 也是原始cookie 的路径
                // 键名 或者 路径 有一项 不同 就会被认为是 不同的 cookie 
                mySetCookie('login', 1, '/', -1);
                // 弹出提示信息
                window.alert('您已经退出登录')
            }

        })

        // 购物车按钮
        $('[name="cart"]').click(function () {
            // 判断 没有登录 
            // 如果已经登录 跳转购物车页面 
            // 如果没有登录 跳转登录页面

            // 获取 cookie 数据
            const cookieObj = myGetCookie();

            // 判断 login 键名是不是存在
            if (cookieObj.login === undefined) {
                // cookieObj.login 调用结果是 undefined 
                // 证明 cookie 中 login键名不存在 没有登录
                if (window.confirm('您还没有登录,点击确定跳转登录页面')) {
                    window.location.href = './login.html'
                }

            } else {
                // cookie.login 调用结果不是 undefined
                // 证明 cookie 中 login键名存在 已经登录
                window.location.href = './cart.html';

            }
        })



    </script>
</body>

</html>